<template>
  <div>
    评论区
    <br>
    <ul>
      <li
        @click="liClk(index)"
        v-for="(item,index) in arr"
        :key="index"
        :class="item[2]?'sss':''"
        :[a]="{display : item[2]?(bo?'':'none'):(bo?'none':'')}"
      >{{item[0]}}:{{item[1]}}</li>
    </ul>
    <button @click="ClkBtn('aa')">全部</button>
    <button @click="ClkBtn('style',true)">已完成</button>
    <button @click="ClkBtn('style',false)">未完成</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      msg: "",
      a: "",
      bo: true
    };
  },
  props: ["arr"],
  methods: {
    liClk(i) {
      this.arr[i][2] = !this.arr[i][2];
      localStorage.setItem("data", JSON.stringify(this.arr));
      this.arr = JSON.parse(localStorage.getItem("data"));
    },
    ClkBtn(a, b) {
      this.a = a;
      this.bo = b;
    }
  },
  beforeCreate() {
    console.log("GetP-beforeCreate");
  },
  created() {
    console.log("GetP-created");
  },
  beforeMount() {
    console.log("GetP-beforeMount");
  },
  mounted() {
    console.log("GetP-mounted");
  },
  beforeUpdate() {
    console.log("GetP-beforeUpdate");
  },
  updated() {
    console.log("GetP-updated");
  },
  beforeDestroy() {
    console.log("GetP-beforeDestroy");
  },
  destroyed() {
    console.log("GetP-destroyed");
  }
};
</script>

<style>
li {
  list-style: none;
}
.sss {
  text-decoration: line-through;
}
</style>
